<!--筛选弹窗组件-->
<template>
  <van-popup v-model="showScreen" position="right" class="screen-popup" :close-on-click-overlay="false" @click-overlay="clickOverlay" >
    <view class="container">
      <view class="main-left"  @click="clickOverlay"></view>
      <view class="main">
        <view class="screen-option-container-main">
          <plateTitle title="发起时间：" :isRequired="false" class="plate-title"/>
          <view class="screen-option-container">
            <view class="screen-option-item"
                  :class="{active: (index*1+1) === isSelect}"
                  v-for="(item,index) in typeList" :key="index"
                  @click="activeBtn(item,index)">{{ item.TITLE }}
            </view>
            <view class="screen-option-item"
                  :class="{active: index === isActive}"
                  v-for="(item,index) in otherList" :key="item.TITLE"
                  @click="selectBtn(item,index)">{{ item.TITLE }}
            </view>
          </view>
          <plateTitle title="其他时间：" :isRequired="false" class="plate-title" v-if="isActive!==''"/>
          <view class="screen-option-container">
            <!-- <view class="screen-option-item"
                  :class="{active: index === isActive}"
                  v-for="(item,index) in otherList"
          :key="index"
                  @click="selectBtn(item,index)">{{ item.TITLE }}
            </view> -->
            <van-cell-group v-if="isActive!==''">
              <van-field v-model="beginTime" name="beginTime" label="计划开始时间" readonly placeholder="选择计划开始时间"
                        input-align="right" right-icon="arrow" required error-message-align="right"
                        @click="onOpenPicker('beginTime')" :rules="[{ required: true, trigger:'onChange'}]" />
              <van-field v-model="endTime" name="endTime" label="计划结束时间" readonly placeholder="选择计划结束时间"
                        input-align="right" right-icon="arrow" required error-message-align="right"
                        @click="onOpenPicker('endTime')" :rules="[{ required: true, trigger:'onChange'}]" />
            </van-cell-group>
            <!--时间选择器-->
            <van-popup v-model="showPicker"  position="bottom">
              <van-datetime-picker :type="datepickertype" :formatter="formatter"  cancel-button-text="清空"
                                  @confirm="onDatetimeConfirm" @cancel="onDatetimeEmpty" v-model="currentDate"
                                  :min-date="minDate" />
            </van-popup>
          </view>
        </view>

        <view class="btn-container">
          <van-button block type="info" color="#417ADC" plain @click="reset">重置</van-button>
          <van-button block type="info" color="#417ADC" @click="screenConfirm">确认</van-button>
        </view>
      </view>
    </view>


  </van-popup>
</template>

<script>
import plateTitle from '../../../components/business/plateTitle.vue';
import moment from "moment/moment";
import {Dialog} from "vant";
export default {
  name: "screen",
  components: {plateTitle},
  props: {
    typeList: {
      type:Array,
      required: true,
    },
    otherList: {
      type:Array,
      required: true,
    },
    showScreen: {
      type: Boolean,
      required: true,
    }
  },
  watch: {

  },
  data() {
    return {
      beginTime: '',
      endTime: '',
      timeString: '',
      currentDate: '',
      minDate: new Date(0),
      datepickertype: 'year-month',
      showPicker: false,
      isSelect: 1, // 控制筛选 发起时间选中
      isActive:'', // 控制筛选 其他时间选中
      selected:'',// 选中的值
      beginTimeData: 1,
    }
  },
  methods: {
    formatter(type, val) {
      if(this.datepickertype == "date"){
        if (type === 'year') {
          return `${val}年`;
        }else if (type === 'month'){
          return `${val}月`;
        }else if (type === 'day'){
          return `${val}日`;
        }
      }else{
        if (type === 'year') {
          return `${val}年`;
        }else if (type === 'month'){
          return `${val}月`;
        }
      }
    },
    onDatetimeConfirm(time) {
      let timeString = "";
      timeString = this.datepickertype == "year-month" ? moment(time).format('YYYY-MM') : moment(time).format(
          'YYYY-MM-DD')


      if (this.pickerType === 'beginTime') {
        this.beginTime = timeString
        if (
            this.endTime !== '' &&
            new Date(this.endTime).getTime() < new Date(this.beginTime).getTime()
        ) {
          Dialog.alert({
            message: '计划开始时间不可晚于计划结束时间',
            theme: 'round-button'
          })
          this.beginTime = ''
        }
      } else if (this.pickerType === 'endTime') {
        this.endTime = timeString
        if (
            this.beginTime !== '' &&
            new Date(this.endTime).getTime() < new Date(this.beginTime).getTime()
        ) {
          Dialog.alert({
            message: '计划结束时间不可早于计划开始时间',
            theme: 'round-button'
          })
          this.endTime = ''
        }
      }
      this.showPicker = false
    },
    clickOverlay(){
      console.log('1111')
      this.closePopup()
    },
    onDatetimeEmpty() {
      this.showPicker = false
      this.pickerType === 'beginTime' && (this.beginTime = '')
      this.pickerType === 'endTime' && (this.endTime = '')
    },

    onOpenPicker(pickerType) {
      if (pickerType === 'beginTime') {
        this.currentDate = this.beginTime !== '' ? new Date(this.beginTime) : new Date()
        if(this.isSelect == '') {
          this.showPicker = true
        }else {
          this.showPicker = false
        }
      } else if (pickerType === 'endTime') {
        this.currentDate =
            this.endTime !== '' ? new Date(this.endTime) : new Date()
        if(this.isSelect == '') {
          this.showPicker = true
        }else {
          this.showPicker = false
        }
      }
      this.pickerType = pickerType
      // this.showPicker = true
    },
    // 重置选项
    reset() {
      // this.closePopup()
      this.isSelect = 1
      this.selected = 1
      this.beginTimeData = 1
      this.isActive = ''
      this.beginTime=''
      this.endTime=''
      // this.$emit('reset', this.selected,this.beginTime,this.endTime);
    },

    closePopup() {
      this.$emit('closePopup', false);
    },
    activeBtn(item,index) { 
      this.isSelect = index*1+1
      if(item.TITLE) {
        this.isActive = ''
        this.beginTime = ''
        this.endTime = ''
      }
      this.beginTimeData = item.VALUE ? item.VALUE : null
    },
    selectBtn(item,index) {
      this.isActive = index
      this.beginTimeData = ''
      if(item.TITLE === '其他'){
        this.datepickertype = 'date'
        this.isSelect = ''
        this.beginTime = ''
        this.endTime = ''
      }else {
        this.showPicker = false
      }
      // if(item.TITLE === '按天'){
      //   this.datepickertype = 'date'
      //   this.isSelect = ''
      //   this.beginTime = ''
      //   this.endTime = ''
      // }else if(item.TITLE === '按月'){
      //   this.datepickertype = 'year-month'
      //   this.isSelect = ''
      //   this.beginTime = ''
      //   this.endTime = ''
      // }else {
      //   this.showPicker = false
      // }
    },
    screenConfirm() {
      this.closePopup()
      this.selected = this.beginTimeData
      this.$emit('confirm',this.selected,this.beginTime,this.endTime)
    },
  }
};
</script>

<style scoped lang="scss">
// .screen-popup {
//   width: px2vw(820);
//   height: calc(100vh - #{px2vh(112)});
//   padding: px2vh(62) px2vw(40) px2vh(50);
//   .main {
//     background: #fff;
//     .screen-option-container-main {
//       height: calc(100vh - #{px2vh(242)});
//       .screen-option-container {
//         display: flex;
//         //justify-content: space-between;
//         flex-wrap: wrap;

//         .screen-option-item {
//           width: px2vw(260);
//           height: px2vh(90);
//           margin-bottom: px2vh(20);
//           line-height: px2vh(90);
//           background: #f7f7f7;
//           color: #666;
//           font-size: px2vh(36);
//           text-align: center;
//           border-radius: $border-radius-base;
//         }
//         .screen-option-item:not(:nth-child(3n)) {
//           margin-right: px2vw(20);
//         }

//         .screen-option-item.active {
//           background: #ecf1fb;
//           color: #417ADC;
//         }
//       }
//     }
//     .screen-popup-content-main {
//       height: calc(100vh - #{px2vh(342)});
//       padding-bottom: px2vh(30);

//       .screen-type-item {
//         margin-bottom: px2vh(30);

//         .plate-title {
//           margin-bottom: px2vh(36);
//         }

//         .screen-option-container {
//           display: flex;
//           //justify-content: space-between;
//           flex-wrap: wrap;

//           .screen-option-item {
//             width: px2vw(260);
//             height: px2vh(90);
//             margin-bottom: px2vh(20);
//             line-height: px2vh(90);
//             background: #f7f7f7;
//             color: #666;
//             font-size: px2vh(36);
//             text-align: center;
//             border-radius: $border-radius-base;
//           }
//           .screen-option-item:not(:nth-child(3n)) {
//             margin-right: px2vw(20);
//           }

//           .screen-option-item.active {
//             background: #ecf1fb;
//             color: #417ADC;
//           }
//         }
//       }
//     }
//   }



//   .btn-container {
//     display: flex;
//     justify-content: space-between;

//     .van-button {
//       height: px2vh(100);
//       margin-left: px2vw(30);
//       margin-right: px2vw(30);
//       border-radius: $border-radius-base;
//     }

//   }
// }
.screen-popup {
  width: 100vw;
  height: 100vh;
  //height: calc(100vh - #{px2vh(212)});
  //padding: px2vh(162) px2vw(40) px2vh(50);
  padding-top: px2vh(0);
  background: rgba(255,255,255,0);
  .container{
    display: flex;
    justify-content: flex-end;
  }
  .main-left {
    width: calc(100vw - #{px2vw(900)});
    opacity: 0.1;
    display: inline-block;
  }
  .main {
    width: px2vw(900);
    height: 100vh;
    // margin-left: calc(100vw - #{px2vw(900)});
    background: #fff;
    .screen-option-container-main {
      height: calc(100vh - #{px2vh(342)});
      padding: px2vh(100) px2vw(40);
      //padding-bottom: px2vh(140);
      .screen-option-container {
        margin-top: px2vh(40);
        display: flex;
        //justify-content: space-between;
        flex-wrap: wrap;

        .screen-option-item {
          width: px2vw(260);
          height: px2vh(90);
          margin-bottom: px2vh(20);
          line-height: px2vh(90);
          background: #f7f7f7;
          color: #666;
          font-size: px2vh(36);
          text-align: center;
          border-radius: $border-radius-base;
        }
        .screen-option-item:not(:nth-child(3n)) {
          margin-right: px2vw(20);
        }

        .screen-option-item.active {
          background: #ecf1fb;
          color: #417ADC;
        }
      }
    }
  }



  .btn-container {
    display: flex;
    justify-content: space-between;

    .van-button {
      height: px2vh(100);
      margin-left: px2vw(30);
      margin-right: px2vw(30);
      border-radius: $border-radius-base;
    }

  }
}
</style>
